{% extends 'core/base.html' %}
{% load static %}

{% block title %}首页 - 社区管理系统{% endblock %}

{% block content %}
<!-- 优化后的Hero Section -->
<div class="hero-section text-white py-3 position-relative">
    <div class="hero-bg"></div>
    <div class="container position-relative">
        <div class="row align-items-center min-vh-20">
            <div class="col-lg-6">
                        <div class="hero-content">
                    <h1 class="display-4 fw-bold mb-4 hero-title-animated">
                        欢迎来到<br>
                        <span class="text-accent">智慧社区管理系统</span>
                    </h1>
                    <p class="lead mb-4 hero-subtitle fw-bold">为您提供便民服务，打造和谐美好的现代化智慧社区生活体验</p>
                </div>
            </div>
            <div class="col-lg-6 text-center">
                <div class="hero-illustration">
                    <div class="hero-graphic">
                        <div class="graphic-circle circle-1"></div>
                        <div class="graphic-circle circle-2"></div>
                        <div class="graphic-circle circle-3"></div>
                        <div class="main-icon">
                            <i class="fas fa-home"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="container py-5">
    <!-- 功能导航 -->
    <div class="row mb-5">
        <div class="col-12">
            <h2 class="text-center mb-4">主要功能</h2>
        </div>
        <div class="col-md-3 mb-4">
            <div class="card h-100 text-center service-card">
                <div class="card-body">
                    <div class="service-icon">
                        <i class="fas fa-bullhorn"></i>
                    </div>
                    <h5 class="card-title">公告中心</h5>
                    <p class="card-text">查看社区最新公告和法律普及信息</p>
                    <a href="{% url 'announcements_list' %}" class="btn btn-primary">查看公告</a>
                </div>
            </div>
        </div>
        <div class="col-md-3 mb-4">
            <div class="card h-100 text-center service-card">
                <div class="card-body">
                    <div class="service-icon">
                        <i class="fas fa-gift"></i>
                    </div>
                    <h5 class="card-title">积分商城</h5>
                    <p class="card-text">使用积分兑换各种生活用品和服务</p>
                    <a href="{% url 'products_list' %}" class="btn btn-success">进入商城</a>
                </div>
            </div>
        </div>
        <div class="col-md-3 mb-4">
            <div class="card h-100 text-center service-card">
                <div class="card-body">
                    <div class="service-icon">
                        <i class="fas fa-comments"></i>
                    </div>
                    <h5 class="card-title">意见反馈</h5>
                    <p class="card-text">向社区管理方反馈问题和建议</p>
                    {% if request.session.user_id %}
                    <a href="{% url 'feedbacks_list' %}" class="btn btn-info">我的反馈</a>
                    {% else %}
                    <a href="{% url 'login' %}" class="btn btn-info">登录使用</a>
                    {% endif %}
                </div>
            </div>
        </div>
        <div class="col-md-3 mb-4">
            <div class="card h-100 text-center service-card">
                <div class="card-body">
                    <div class="service-icon">
                        <i class="fas fa-shopping-cart"></i>
                    </div>
                    <h5 class="card-title">我的订单</h5>
                    <p class="card-text">查看和管理积分兑换订单</p>
                    {% if request.session.user_id %}
                    <a href="{% url 'my_orders' %}" class="btn btn-warning">查看订单</a>
                    {% else %}
                    <a href="{% url 'login' %}" class="btn btn-warning">登录使用</a>
                    {% endif %}
                </div>
            </div>
        </div>
    </div>



    <!-- 最新公告 -->
    <div class="row mb-5">
        <div class="col-12">
            <h3 class="mb-4">
                <i class="fas fa-newspaper text-primary"></i> 最新公告
                <a href="{% url 'announcements_list' %}" class="btn btn-outline-primary btn-sm float-end">查看更多</a>
            </h3>
        </div>
        {% for announcement in announcements %}
        <div class="col-lg-6 mb-3">
            <div class="card announcement-card h-100 announcement-clickable" onclick="location.href='{% url 'announcement_detail' announcement.announcement_id %}'">
                <div class="card-body">
                    <div class="d-flex justify-content-between align-items-start mb-2">
                        <h6 class="card-title mb-0">
                            <a href="{% url 'announcement_detail' announcement.announcement_id %}" class="text-decoration-none stretched-link">
                                {{ announcement.title }}
                            </a>
                        </h6>
                        <span class="badge bg-{% if announcement.type == 'community' %}primary{% else %}success{% endif %}">
                            {{ announcement.get_type_display }}
                        </span>
                    </div>
                    <p class="card-text text-muted small mb-2">{{ announcement.content|truncatechars:100 }}</p>
                    <div class="position-relative">
                        <small class="text-muted">
                            <i class="fas fa-clock"></i> {{ announcement.created_at|date:"Y-m-d H:i" }}
                        </small>
                    </div>
                    <!-- 查看详情按钮 - 卡片右下角 -->
                    <div class="announcement-detail-btn-corner">
                        <small class="text-primary">
                            <i class="fas fa-arrow-right"></i> 查看详情
                        </small>
                    </div>
                </div>
            </div>
        </div>
        {% empty %}
        <div class="col-12">
            <div class="alert alert-info text-center">
                <i class="fas fa-info-circle"></i> 暂无公告信息
            </div>
        </div>
        {% endfor %}
    </div>

    <!-- 热门商品 -->
    {% if products %}
    <div class="row">
        <div class="col-12">
            <h3 class="mb-4">
                <i class="fas fa-fire text-danger"></i> 热门商品
                <a href="{% url 'products_list' %}" class="btn btn-outline-danger btn-sm float-end">查看更多</a>
            </h3>
        </div>
        {% for product in products %}
        <div class="col-lg-2 col-md-4 col-sm-6 mb-4">
            <div class="card product-card h-100">
                <div class="card-body text-center">
                    <i class="fas fa-gift fa-2x text-primary mb-3"></i>
                    <h6 class="card-title">{{ product.product_name }}</h6>
                    <p class="card-text text-primary fw-bold">{{ product.points_required }} 积分</p>
                    <p class="card-text small text-muted">{{ product.description1|truncatechars:30 }}</p>
                </div>
            </div>
        </div>
        {% endfor %}
    </div>
    {% endif %}
</div>

<style>
.hero-section {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    min-height: 400px;
}

.service-card:hover {
    transform: translateY(-5px);
    transition: transform 0.3s ease;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}

.announcement-card:hover {
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    transition: box-shadow 0.3s ease;
}

.product-card:hover {
    transform: scale(1.05);
    transition: transform 0.3s ease;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}
</style>
{% endblock %}
